<script>
    document.cookie="last=pages/navegadorweb.php";
    loadTabs();
</script>
        
<p class="xl">Navegador Web</p>
<table width="100%" class="center">
    <tr><td>
        <img src="img/chrome_logo.png" height="100" title="Google Chrome"></img>
    </td><td>
        <img src="img/explorer_logo.png" height="100" title="Internet Explorer"></img>
    </td><td>
		<img src="img/firefox_logo.png" height="100" title="Mozilla Firefox"></img>
    </td></tr>			
</table>

<p class="separado">Un navegador web es un programa que permite navegar por internet desde cualquier computadora o dispositivo móvil. Actualmente, usted se encuentra ejecutando un navegador web con el que accedió a este sitio de internet.</p> 
<p>Las imágenes en la parte superior de esta pantalla, muestran algunos de los navegadores más utilizados. Si posa el puntero del mouse sobre las imágenes aparecerá el nombre de cada navegador.</p>

<div id="partes_navegador">
	<p class="separado large">Partes del navegador</p>
    <table width="100%" class="borde_1px center">
        <tr><td>
			<img src="img/barra_dir.png" height="30" title="Barra de direcciones"></img>
            <p><b>Barra de direcciones</b></p>
        </td><td align="left">
            <p>Es una barra de color blanco en la parte superior del navegador donde aparece el nombre del sitio web en el que se encuentra. Generalmente el nombre del sitio se escribe de la siguiente manera <b>www.nombre.com</b>. Es posible que, dependiendo del país de origen, al final se deba agregar el código del mismo, por ejemplo para Argentina sería <b>www.nombre.com.ar</b>.</p>
        </td></tr>
		<tr><td>	
			<img src="img/home_button.png" height="50" title="Botón de Inicio"></img>
			<p><b>Botón Inicio</b></p>
        </td><td align="left">
			<p>Representado en forma de casa, al presionar este botón se abrirá la página de inicio configurada en su navegador.</p>
        </td></tr>
		<tr><td>
		    <img src="img/reload_button.png" height="50" title="Actualizar página"></img>
			<p><b>Botón Recargar</b></p>
        </td><td align="left">
			<p>Representado con una flecha circular, al presionar este botón se volverá a cargar la página web que esté visualizando. Este botón suele utilizarse cuando la página no ha cargado su contenido de forma completa.</p>
        </td></tr>
		<tr><td>	
			<img src="img/Back_Button.jpg" height="50" title="Regresar"></img>
			<p><b>Botón Atrás</b></p>
        </td><td align="left">
			<p>Representado con una flecha apuntando hacia la izquierda, al presionar este botón el navegador volverá a la página anterior.</p>
        </td></tr>
		<tr><td>
			<img src="img/Fwd_Button.jpg" height="50" title="Avanzar"></img>
			<p><b>Botón Adelante</b></p>
        </td><td align="left">
			<p>Representado con una flecha apuntando hacia la derecha, este botón permite avanzar una página siempre y cuando se haya presionado antes el botón anterior.</p>
        </td></tr>	
		<tr><td>
			<img src="img/favorites-icon.png" height="50" title="Añadir a favoritos"></img>
			<p><b>Botón Favoritos</b></p>
        </td><td align="left">
			<p>Representado con una estrella, al presionar este botón el sitio que esté visualizando quedará guardado como favorito para poder acceder nuevamente sin necesidad de ingresar la dirección en la barra de direcciones.</p>
        </td></tr>
    </table>
</div>

<div id="navegar">
    <p class="separado"><u>Realicemos un ejercicio</u></p>
    <p>Esto es sólo un ejercicio donde se simula una barra de direcciones. Recuerde que para acceder a cualquier página, deberá ingresar la dirección en la barra de direcciones.</p>
    <p>Presione el botón 'Abrir' para abrir un sitio web en otra ventana (en este caso el buscador Google). La página se cerrará luego de unos segundos.</p>
    <table><tr>
        <td>Dirección</td>
        <td><input type="text" id="site1" onclick="enfocar('cmd');" value="www.google.com" class="disabled"></input>
        <td><a href="#navegar" class="boton" id="abrir" onClick="AbrirSitioWeb('site1');mostrar('SitioManual');disable('abrir');enfocar('site2');">Abrir</a></td>
    </tr></table>
</div>

<div id="SitioManual" class="oculto">
    <p class="felicitacion">¡Muy bien!</p>

    <p class="separado">Ahora haga clic en la caja de texto, ingrese un sitio y presione la tecla Enter (la caja de texto representa la barra de direcciones del navegador). Si no conoce ningún sitio puede probar ingresando el sitio de noticias <b>infobae.com</b></p>
    <table><tr>
        <td>Dirección</td>
        <td><input type="text" id="site2" class="wide" onkeypress="if(event.keyCode == 13){if(AbrirSitioWeb('site2')==1){mostrar('pestañas');desenfocar('site2');}}" title="Ingrese la dirección de un sitio web y presione la tecla Enter."></input></td>
    </tr></table>
</div>

<div id="pestañas" class="oculto">
    <p class="felicitacion">¡Muy bien! Ha aprendido a abrir un sitio web. A continuación se explicará cómo poder abrir varios sitios a la vez.</p>

    <p class="large separado"><u>Navegación por Pestañas</u></p>
    <p> Las pestañas de un navegador web le permiten al usuario tener varias páginas abiertas en una misma ventana de navegador.</p>
    <p> La primera vez que abra su navegador, si observa la esquina superior izquierda, lo verá seguramente con una sola pestaña abierta como muestra la imagen a continuación.</p>	
<?php if($_COOKIE['nav']=='chrome') {?>
    <img src="img/wiki_ingres.png" title="Pestañas">	
<?php }?>
<?php if($_COOKIE['nav']=='ff') {?>
    <img src="img/Tabs_Firefox.jpg" title="Pestañas">	
<?php }?>
<?php if($_COOKIE['nav']=='ie') {?>
    <img src="img/Tabs_Explorer.jpg" title="Pestañas">
<?php }?>

    <p class="separado">En el siguiente video puede observar de qué manera abrir más de una pestaña con diferentes páginas web y cómo, presionando sobre cada una, puede pasar de una pestaña a la otra.</p>
<?php if($_COOKIE['nav']=='chrome') {?>
    <video controls width="100%"> <source src="videos/navegador/Video_Tabs_Chrome.mp4" type="video/mp4"> </video>
<?php }?>	
<?php if($_COOKIE['nav']=='ff') {?>
    <video controls width="100%"> <source src="videos/navegador/Video_Tabs_Firefox.mp4" type="video/mp4"> </video>	
<?php }?>
<?php if($_COOKIE['nav']=='ie') {?>
    <video controls width="100%"> <source src="videos/navegador/Video_Tabs_Explorer.mp4" type="video/mp4"> </video>
<?php }?>

    <p class="separado">Vamos a realizar un ejercicio.</p>
    <div id="tabs">
        <ul>
            <li id="li-1"><a href="#tabs-1">Pestaña 1</a><span class="ui-icon ui-icon-circle-close right" role="presentation">Remove Tab</span></li>
            <button id="add_tab" class="absolute"><span class="ui-icon ui-icon-circle-plus" role="presentation">New Tab</span></button>
        </ul>
        <div id="tabs-1">
            <p>Contenido de la pestaña 1.</p>
        </div>
    </div>

    <p class="separado">Haga clic sobre el botón con el signo más (+) para crear una pestaña.</p>
    <div id="newTab" class="oculto">
        <p class="felicitacion">¡Excelente, ha aprendido a crear una pestaña!</p>
<?php if($_COOKIE['so']!='android') {?>
        <p>Arrastrar y soltar una pestaña permite reordenarlas. Haga clic sobre una pestaña, mantenga la presión y mueva el cursor hacia un costado hasta que las demás pestañas se reacomoden.</p>
    </div>
    <div id="moveTab" class="oculto">
        <p class="felicitacion">¡Felicitaciones, ha aprendido a mover una pestaña!</p>
<?php }?>
<?php if($_COOKIE['so']=='android') {?>
    <script>solved++;</script>
<?php }?>
        <p>Haga clic sobre el botón con la equis (x) para cerrar una pestaña.</p>
    </div>
    <div id="closeTab" class="oculto">
        <p class="felicitacion">¡Excelente, ha aprendido a cerrar una pestaña!</p>
    </div>
    <div id="final" class="oculto">
        <p class="felicitacion">¡Felicitaciones, ha aprendido a manejar pestañas!</p>
        <p class="siguiente">Haga clic en el siguiente enlace para <a href="#" onclick="load('pages/buscadorweb.php');levelUp('6');">seguir aprendiendo</a>.</p>
    </div>
</div>
